<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<!--抽出公共部分!-->

<!--1、导航栏-->
  <header class="topbar" th:fragment="topbar">
    <!-- 将重复的导航栏抽取出来: th:fragment="topbar"-->
    <nav class="navbar top-navbar navbar-toggleable-sm navbar-light" id="topbar_vue">
      <!--                 ============================================================== -->
      <!-- Logo -->
      <!-- ============================================================== -->
      <div class="navbar-header">
        <a class="navbar-brand" href="index.html">
          <!-- Logo icon --><b>
          <!--You can put here icon as well // <i class="wi wi-sunset"></i> //-->

          <!-- Light Logo icon -->
          <img th:src="@{backed/assets/images/logo-light-icon.png}" alt="homepage" class="light-logo"/>
        </b>
          <!--End Logo icon -->
          <!-- Logo text --><span>

                         <!-- Light Logo text -->
                         <img th:src="@{backed/assets/images/logo-light-text.png}" class="light-logo"
                              alt="homepage"/></span> </a>
      </div>
      <!-- ============================================================== -->
      <!-- End Logo -->
      <!-- ============================================================== -->
      <div style="width: 100%" >
        <!-- ============================================================== -->
        <!-- toggle and nav items -->
        <!-- ============================================================== -->

        <!-- ============================================================== -->
        <!-- User profile and search -->
        <!-- ============================================================== -->
        <ul class="navbar-nav my-lg-0" style="float: right">
          <!-- ============================================================== -->
          <!-- Profile -->
          <!-- ============================================================== -->

          <li class="nav-item dropdown"  >
            <a class="nav-link dropdown-toggle text-muted waves-effect waves-dark" href="" data-toggle="dropdown"
               aria-haspopup="true" aria-expanded="false" >
              <img @click="toProfile" style="width: 50px;height: 50px;border-radius: 50%" th:src="@{backed/assets/images/users/5.jpg}" alt="个人中心">
            </a>
          </li>
          <li class="nav-item dropdown exit" @click="toExit">
            <a class="nav-link dropdown-toggle text-muted waves-effect waves-dark" href="" data-toggle="dropdown"
               aria-haspopup="true" aria-expanded="false"  @mouseover="">
              <img  class="exit1" style="width: 40px;height: 40px;" th:src="@{backed/assets/images/exit.png}" alt="注销">
              <img  class="exit2" style="width: 40px;height: 40px;" th:src="@{backed/assets/images/exit2.png}" alt="注销">
            </a>
          </li>
        </ul>
      </div>
    </nav>
  </header>
  <!--2、侧边栏-->
  <aside class="left-sidebar" th:fragment="sidebar">
    <!-- Sidebar scroll-->
    <div class="scroll-sidebar">
      <!-- Sidebar navigation-->
      <nav class="sidebar-nav">
        <ul id="sidebarnav">
          <li><a class="waves-effect waves-dark" th:href="@{/index}" aria-expanded="false"><i class="mdi mdi-gauge"></i><span
              class="hide-menu">首页</span></a> <!-- Dashboard -->
          </li>
          <li><a class="waves-effect waves-dark" th:href="@{/pages-profile}" aria-expanded="false"><i
              class="mdi mdi-account-check"></i><span class="hide-menu">个人中心</span></a>
          </li>
          <li><a class="waves-effect waves-dark" th:href="@{/table-basic}" aria-expanded="false"><i
              class="mdi mdi-table"></i><span class="hide-menu">用户模块</span></a>
          </li>
          <li><a class="waves-effect waves-dark" th:href="@{/icon-material}" aria-expanded="false"><i
              class="mdi mdi-emoticon"></i><span class="hide-menu">歌曲模块</span></a>
          </li>
          <li><a class="waves-effect waves-dark" th:href="@{/map-google}" aria-expanded="false"><i
              class="mdi mdi-earth"></i><span class="hide-menu">歌单入库</span></a>
          </li>
          <li><a class="waves-effect waves-dark" th:href="@{/pages-blank}" aria-expanded="false"><i
              class="mdi mdi-book-open-variant"></i><span class="hide-menu">歌单模块</span></a>
          </li>
          <li><a class="waves-effect waves-dark" th:href="@{/pages-error-404}" aria-expanded="false"><i
              class="mdi mdi-help-circle"></i><span class="hide-menu">Error 404</span></a>
          </li>
        </ul>
      </nav>
      <!-- End Sidebar navigation -->
    </div>
    <!-- End Sidebar scroll-->
    <!-- Bottom points-->
    <div class="sidebar-footer">
      <!-- item--><a href="" class="link" data-toggle="tooltip" title="Settings"><i class="ti-settings"></i></a>
      <!-- item--><a href="" class="link" data-toggle="tooltip" title="Email"><i class="mdi mdi-gmail"></i></a>
      <!-- item--><a href="" class="link" data-toggle="tooltip" title="Logout"><i class="mdi mdi-power"></i></a></div>
    <!-- End Bottom points-->
  </aside>

  <!--3、尾栏-->
  <footer class="footer" th:fragment="footer"> © 2024 Material Pro Admin <a target="_blank"

                                                                      href="http://www.mobanwang.com/"
                                                                         title="网页模板">网页模板</a></footer>


<script th:src="@{/backed/js/vue.js}"></script>
<script th:src="@{/login/js/jquery-1.12.4.js}"></script>
<script th:inline="javascript"></script>
<script th:fragment="topbar_vue">
  const topbar_vue=new Vue({
    el:"#topbar_vue",
    data:{

    },
    methods:{
      //导航栏、1、个人中心的跳转
      toProfile(){
        window.location.href="pages-profile"
      },
      //导航栏、2、注销功能，跳转到登路界面
      toExit(){
        //清除缓存
        window.sessionStorage.removeItem("username");
        window.location.href="login.html"
      },
      //导航栏、3、切换图片
      toMouseEnter(){
        console.log("鼠标移入")
        $("#exit").src="backed/assets/images/exit2.png";

      },
      toMouseLeave(){
        console.log("鼠标移出")
        $("#exit").src="backed/assets/images/exit1.png";

      }
    }
  })
</script>




</html>

<script setup lang="ts">
</script>